<template>
  <div>
    <el-input placeholder="请选择顶部菜单" v-model="name" @focus="dialogVisible = true"></el-input>
    <el-dialog
      append-to-body
      title="请选择上级角色"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width="30%">
      <el-input placeholder="请输入关键字进行过滤" v-model="filterText"></el-input>
      <el-tree
        ref="tree"
        :data="data"
        show-checkbox
        node-key="id"
        :default-expanded-keys="[2, 3]"
        :default-checked-keys="checkList"
        :filter-node-method="filterNode"
        :props="defaultProps">
      </el-tree>
    </el-dialog>
  </div>
</template>

<script>
    import {getTopMenusCodes} from "@/api/system/tenant";
    export default {
        name: "checkTree",
        props: ['topMenusCodes'],
        data() {
            return {
                value: '',
                dialogVisible: false,
                data: [],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                filterText: '',
                checkList: [],
                name: '',
            }
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        methods: {
            init(topMenusCodes) {
                this.checkList = [];
                this.name = '';
                if(topMenusCodes.length>0){
                    if (this.$refs.tree) {
                        this.$refs.tree.setCheckedKeys([])
                    }
                    this.data = topMenusCodes;
                    let arr = [];
                    topMenusCodes.map(item => {
                        if (item.status == 1) {
                            arr.push(item)
                        }
                    })
                    if (arr.length > 0) {
                        arr.map((item, index) => {
                            if (index > 0) {
                                this.name = this.name + "/" + item.name;
                            } else {
                                this.name = item.name
                            }
                            this.checkList.push(item.id)
                        })
                    }
                }else{
                    getTopMenusCodes().then(res => {
                        if (res.data.success) {
                            this.data = res.data.data;
                        }
                    })
                }

            },
            filterNode(value, data) {
                if (!value) return true;
                return data.name.indexOf(value) !== -1;
            },
            handleClose() {
                this.checkList = [];
                this.name = '';
                let result = this.$refs.tree.getCheckedNodes();
                result.map(item => {
                    this.checkList.push(item.id);
                    this.name = this.name + "/" + item.name;
                })
                this.$emit('getValue', result, this.data)
                this.dialogVisible = false;
                this.$refs.tree.setCheckedKeys([])
            }
        },
    }
</script>

<style scoped>

</style>
